<template>
  <!-- 计费方式 -->
  <div>
    <span v-if="readonly">{{ selectData }}</span>
    <el-select
      v-else
      :disabled="readonly"
      @change="changeData"
      v-model="checkedData"
      :placeholder="$t('请选择计费方式')"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.value + item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'billingMethods',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: {},
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    data: {
      type: Object,
      default: () => {},
    },
    type: Number,
  },
  data() {
    return {
      options: [{ value: '1001', label: this.$t('按单价计费') }],
      selectData: this.$t('1001按单价计费'),
      checkedData: '1001',
      readonly: false,
      costCode: null,
    }
  },
  created() {
    this.readonly = Boolean(this.$route.query.readonly)
    eventBus.$on('feeChange', (val) => {
      this.$nextTick(() => {
        this.queryData(val)
      })
    })
    if (this.value) {
      this.setData()
    }
    this.$emit('input', '1001')
  },
  methods: {
    queryData(val) {
      let templateTypeCode = this.detail.templateTypeCode
      this.costCode = val
      // 当 ‘模式=行业解决方案 and 费用=WMSCCFY00000001入库费’情况下，可选枚举及描述 ‘1001按单价计费、1002按总价计费’
      if (templateTypeCode === 'WMSHZ2' && val === 'WMSCCFY00000001') {
        this.options = [
          { value: '1001', label: this.$t('按单价计费') },
          { value: '1002', label: this.$t('按总价计费') },
        ]

        if (this.type != 1 && this.checkedData) {
          this.$emit('billingMethodsChange', {
            costCode: this.costCode,
            billingCode: this.checkedData,
          })
        }
      } else {
        this.options = [{ value: '1001', label: this.$t('按单价计费') }]
        this.$set(this, 'checkedData', '1001')
        this.$set(this, 'selectData', this.$t('1001按单价计费'))
        this.$emit('input', String(this.checkedData))
        this.$emit('billingMethodsChange', {
          costCode: this.costCode,
          billingCode: this.checkedData,
        })
      }
    },
    changeData(val) {
      let info = this.options.find((it) => it.value == val) || {}
      this.selectData = info.value + info.label
      this.$emit('input', String(this.checkedData))
      this.$emit('billingMethodsChange', {
        costCode: this.costCode,
        billingCode: this.checkedData,
      })
    },
    setData() {
      this.selectData = JSON.parse(this.value).value
      this.checkedData = JSON.parse(this.value).checkedData
    },
    getData() {
      return {
        value: this.selectData,
        checkedData: this.checkedData,
      }
    },
  },
}
</script>
